<template>
      <div id="topNav">
      <div class="top-nav-wrap">
        <div class="logo"><router-link to="/index"><h1>XBQ</h1></router-link></div>
        <div class="left-nav">
          <ul>
            <li><router-link to="/index"><div class="home-page">首页</div></router-link></li>
            <li><div class="hot-post">热点</div></li>
            <li>
              <div class="search">
                <input
                  type="text"
                  :placeholder="'请输入' + searchClass.name + '关键词'"
                >
                  <router-link :to="{name : 'searchContent', params:{classify : searchClass.value}}">
                  <span
                    class="search-icon iconfont icon-sousuo"
                  ></span>
                  </router-link>
                <div class="choose">
                  <button>{{searchClass.name}}</button>
                  <div class="option">
                    <span
                      class="iconfont icon-sanjiaoxing"
                      @click.prevent.stop = 'showSearch'
                    ></span>
                    <ul v-if="show.search">
                      <li @click="changeSeaCla('帖子', 'post')">帖子</li>
                      <li @click="changeSeaCla('用户', 'user')">用户</li>
                      <li @click="changeSeaCla('课程', 'class')">课程</li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="right-nav">
          <!-- 登录前 -->
          <ul v-if="!isLogin">
            <li>
              <div class="write-post choose">
                <button @click="$emit('displayLogin','login')">写帖</button>
              </div>
            </li>
            <li>
              <span class="login-button" @click="$emit('displayLogin','login')">登录</span>
            </li>
            <li>
              <span class="register-button" @click="$emit('displayLogin','register')">注册</span>
            </li>
          </ul>
          <!-- 登陆后 -->
          <ul v-else>
            <li>
              <div class="write-post choose">
                <!-- 跳转到相应的写帖页面 -->
                  <button @click="toWritePage">写帖</button>
              </div>
            </li>
            <li>
              <span
                class="note-notice iconfont icon-tongzhi"
              ></span>
            </li>
            <li>
              <a href="personalCenter.html">
                <img src="../../../../assets/img/user/userHead.png" alt="用户头像">
              </a>
              <ul class="user-menu" v-if="false">
                <div>
                  <li>写文章</li>
                </div>
                <div>
                  <li>我的主页</li>
                  <li>我喜欢的</li>
                  <li>我收藏的</li>
                </div>
                <div>
                  <li>设置</li>
                  <li>关于</li>
                </div>
                <div>
                  <li>登出</li>
                </div>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'topNav',
    props : {
      isLogin : {
        default: false,
        type:Boolean
      },
      // 用用判断当前页面是首页 还是personal
      currPage : {
        default: 'index',
        type: String
      }
    },
    data () {
      return {
        show : {
          search : false,
/*          write : false*/
        },
        // 存放搜索的类型
        searchClass : {
          name : '帖子',
          value : 'post'
        },
  /*      writeClass : {
          name : '问题帖',
          value : 'helpPost'
        }*/
      }
    },
    methods : {
      // 搜索是的选择展开
      showSearch : function () {
        window.onclick = null;
        this.show.search = true;
        console.log("NZQ");
        let that = this;
        window.onclick = function () {
          that.show.search = false;
        }
      },
      toWritePage : function () {
        window.location.href = 'writePost.html';
      },
/*      // 写文章是的选择展开
      showWrite : function () {
        window.onclick = null;
        this.show.write = true;
        let that = this;
        window.onclick = function () {
          that.show.write = false;
        }
      },*/
      // 改变searchClas
      changeSeaCla : function (name, value) {
        this.searchClass.name = name;
        this.searchClass.value = value
      },
      // 改变writeClass
/*      changeWriCla : function (name, value) {
        this.writeClass.name = name;
        this.writeClass.value = value;
      },*/
      personalSearch : function () {
        window.location.href = 'main.html'
      }
    }
  }
</script>

<style scoped>
  #topNav {
    z-index: 99;
    width: 100%;
    height: 60px;
    position: fixed;
    color: #71777c;
    font: 16px/60px "Microsoft YaHei",sans-serif;
    background-color: white;
  }
  .top-nav-wrap {
    height: 60px;
    width: 1200px;
    margin: 0 auto;

  }
  #topNav .logo,.left-nav {
    float: left;
  }
  .logo {
    font: 30px/60px "Microsoft YaHei",sans-serif;
    color: #007fff;
    margin-right: 50px;
  }
  .logo a h1{
    font: 30px/60px "Microsoft YaHei",sans-serif;
    color: #007fff;
  }
  .logo:hover {
    cursor: pointer;
  }
  .left-nav ul {
  }
  .left-nav ul li {
    margin-right: 40px;
    float: left;
  }
  .left-nav ul li:hover {
    color: #007fff;
    cursor: pointer;
  }
  .left-nav ul li:hover a div{
    color: #007fff;
    cursor: pointer;
  }
  .left-nav>ul>li:last-child {
    margin-left: 100px;
  }
  .left-nav .search input,.choose{
    float: left;
    margin-top: 15px;
    width: 120px;
  }
  .left-nav .search input {
    padding-left: 6px;
    margin-top: 15.5px;
    width: 140px;
    height: 28px;
    border: 1px solid #c0c8d2;
    font: 16px/30px "Microsoft YaHei",sans-serif;
    outline: none;
    background-color: transparent;
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
    color: #71777c;
  }

  .left-nav .search input:focus {
    border: 1px solid deepskyblue;
  }
.left-nav .search input:-ms-input-placeholder {
  color: #71777c;
  font: 14px/30px "Microsoft YaHei",sans-serif;
}
.left-nav .search input:-moz-placeholder {
  color: #71777c;
  font: 14px/30px "Microsoft YaHei",sans-serif;
}
  .left-nav .search input::-moz-placeholder {
    color: #71777c;
    font: 14px/30px "Microsoft YaHei",sans-serif;
  }
  .left-nav .search input::-ms-input-placeholder {
    color: #71777c;
    font: 14px/30px "Microsoft YaHei",sans-serif;
  }
  .left-nav .search input::-webkit-input-placeholder {
    color: #71777c;
    font: 14px/30px "Microsoft YaHei",sans-serif;
  }

  .left-nav .search span.search-icon {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 14px;
    background-color: #007fff ;
    color: white;
    line-height: 30px;
    text-align: center;
    border: 1px solid transparent;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
  }
  .left-nav .search span.search-icon:hover {
    background-color: #0876e4;
  }
  .left-nav .choose {
    margin-left: 10px;
    font-weight: bold;
  }


  /* right-nav */
  .right-nav {
    float: right;
  }

  .right-nav>ul>li:hover span{
    color: #0071e2;
  }
  .right-nav ul li {
    float: left;
    margin-left: 40px;
    color: #007fff;
  }
  .right-nav ul li div.write-post {
    border-radius: 4px;
  }
  .right-nav ul li div.write-post button {
    border-right: none;
  }
  .right-nav ul li div.write-post:hover button {
    border-radius: 4px;
  }
  .right-nav ul li:last-child {
    margin-left: 20px;
  }
  .right-nav ul li:hover {
    color: #007fff;
    cursor: pointer;
  }
  .right-nav ul li span.note-notice{
    margin-right: 20px;
    color: #71777c;
  }
  .right-nav ul li span.note-notice:hover {
    color: #007fff;
  }
  .right-nav .option>ul>li {
    margin: 0;
  }
  .right-nav img {
    height: 36px;
    width: 36px;
    margin-top: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

  .right-nav .user-menu{
    width: 140px;
    position: absolute;
    top: 100%;
    right: 176px;
    color: #3b76c5;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.05);
  }
  .right-nav .user-menu>div {
    padding: 5px 0;
    border-bottom: 1px solid rgba(178,186,194,.15);
  }
  .right-nav .user-menu>div:last-child {
    border-bottom: none;
  }
  .right-nav .user-menu>div li {
    float: none;
    display: block;
    margin: 5px 0;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
  }
  .right-nav .user-menu>div li:hover {
    background-color: #ececec;
  }



  /* 公共 */
  .choose {
    background-color: #007fff;
    width: fit-content;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
  }
  .choose button,.option {
    float: left;
    height: 30px;
    color: white;
  }
  .choose button:hover,.option:hover {
    background-color: #0876e4;
    color: white;
    cursor: pointer;
  }
  .choose button {
    border: none;
    outline: none;
    background-color: transparent;
    border-right: 1px solid #b5bfc7;
    width: fit-content;
    padding: 0 10px;
  }
  .choose .option {
    width: 15px;
    position: relative;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
  }

  .choose .option span {
    font-size: 13px;
    display: block;
    width: 15px;
    height: 30px;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
  }

  .choose .option ul {
    width: 100px;
    position: absolute;
    top: 100%;
    left: 0;
    color: #3b76c5;
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .option ul li {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-top: 0;
    font-size: 14px;
    font-weight: 500;
    color: #3b78cc;
    border-bottom: 1px solid rgba(178,186,194,.15);
  }
  .option ul li:last-child {
    border-bottom: none;
  }

  .option ul li:hover {
    background-color: #ececec;
  }
  /* 公共结束 */
</style>
